<template>
    <div class="pension-calculator">
        <h2>退休金计算器</h2>
        <!-- 上年度全省在岗职工月平均工资 -->
        <div class="form-item">
            <label>全省上年度平均工资：</label>
            <el-input v-model="averageProvinceSalary" placeholder="请输入全省平均工资" type="number" />
        </div>
        <!-- 本人平均缴费工资指数 -->
        <div class="form-item">
            <label>本人平均缴费工资指数：</label>
            <el-input v-model="wageIndex" placeholder="请输入工资指数" type="number" />
        </div>
        <!-- 缴费年限 -->
        <div class="form-item">
            <label>实际缴费年限（年）：</label>
            <el-input v-model="paymentYears" placeholder="请输入缴费年限" type="number" />
        </div>
        <!-- 个人账户余额 -->
        <div class="form-item">
            <label>个人账户余额：</label>
            <el-input v-model="personalAccountBalance" placeholder="请输入账户余额" type="number" />
        </div>
        <!-- 退休年龄 -->
        <div class="form-item">
            <label>退休年龄：</label>
            <el-select v-model="retirementAge" placeholder="请选择退休年龄" style="width: 250px;"
                @change="updatePaymentMonths">
                <el-option label="50岁" :value="50" />
                <el-option label="55岁" :value="55" />
                <el-option label="60岁" :value="60" />
                <el-option label="65岁" :value="65" />
            </el-select>
        </div>
        <!-- 计发月数（自动填充） -->
        <div class="form-item">
            <label>计发月数：</label>
            <el-input v-model="paymentMonths" disabled style="width: 250px;" />
        </div>
        <!-- 视同缴费年限 -->
        <div class="form-item">
            <label>视同缴费年限（年）：</label>
            <el-input v-model="transitionYears" placeholder="请输入视同缴费年限" type="number" />
        </div>
        <!-- 计算按钮 -->
        <div class="form-item button-row">
            <el-button type="primary" @click="calculatePension">计算退休金</el-button>
        </div>
        <!-- 输出结果 -->
        <div class="form-item">
            <label>退休金：</label>
            <span class="result">{{ pension || '计算结果将在此显示' }}</span>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const averageProvinceSalary = ref('');
const wageIndex = ref('');
const paymentYears = ref('');
const personalAccountBalance = ref('');
const paymentMonths = ref(139);
const transitionYears = ref('');
const pension = ref('');
const retirementAge = ref(null); // 新增：退休年龄

const updatePaymentMonths = () => {
    const age = retirementAge.value;
    const map = {
        50: 195,
        55: 170,
        60: 139,
        65: 101
    };
    paymentMonths.value = map[age] || '';
};

const calculatePension = () => {
    const provinceSalary = parseFloat(averageProvinceSalary.value);
    const index = parseFloat(wageIndex.value);
    const years = parseFloat(paymentYears.value);
    const accountBalance = parseFloat(personalAccountBalance.value);
    const months = parseFloat(paymentMonths.value);
    const transition = parseFloat(transitionYears.value);

    if (isNaN(provinceSalary) || isNaN(index) || isNaN(years) || isNaN(accountBalance) || isNaN(months) || isNaN(transition)) {
        pension.value = '请填写完整有效信息';
        return;
    }

    const indexedSalary = provinceSalary * index;

    const basicPension = ((provinceSalary + indexedSalary) / 2) * years * 0.01;
    const personalPension = accountBalance / months;
    const transitionPension = provinceSalary * index * transition * 0.013;

    pension.value = (basicPension + personalPension + transitionPension).toFixed(2) + ' 元';
};
</script>

<style scoped>
.pension-calculator {
    max-width: 600px;
    margin: 40px auto; /* 自动左右边距实现水平居中，上下边距为40px */
    padding: 30px;
}


h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.form-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.button-row {
    justify-content: center;
}

label {
    min-width: 200px;
    text-align: right;
    font-weight: 500;
    color: #000;
}

.result {
    color: #409eff;
    font-weight: bold;
}
</style>
